<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- v-on:事件监听 -->
    <!-- 事件：DOM事件（鼠标事件、键盘事件、页面事件、表单事件）、自定义事件 -->
    <!-- 语法： v-on:事件名称="函数" -->
    <!-- 语法糖： @事件名称="函数"-->

    <div id="app">
        <div @click="all">
            <!-- 方法一： -->
            <!-- <button @click="count--">-</button>
            <button @click="sub">-</button> -->
            <button class="sub">-</button>
            <!-- 方法二： -->
            <!-- 不传参数的时候，函数可以不加小括号 -->
            <!-- <button @click="add">+</button> -->
            <!-- 要传参的时候，就需要加小括号传入参数 -->
            <!-- <button @click="add(x)">+</button> -->
            <button class="add">+</button>
        </div>


        <h1>{{count}}</h1>

        <!-- 事件流=事件捕获+事件冒泡 -->

        <!-- 事件冒泡 -->
        <div class="father" @click="father">
            <div class="son" @click="son"></div>
        </div>

        <!-- v-on(@)的修饰符 -->
        <!-- 1.阻止事件冒泡 -->
        <div class="father" @click.stop="father">
            <div class="son" @click.stop="son"></div>
        </div>
        <!-- 2.阻止默认行为 -->
        <a href="https://www.baidu.com" @click.prevent>百度一下</a>
        <a href="https://www.baidu.com" @click.prevent="son">百度一下</a>
        <!-- 3.串联修饰符：同时使用多个修饰符，修饰符顺序无要求 -->
        <div class="father" @click="father">
            <div class="son" @click="son">
                <a href="https://www.baidu.com" @click.stop.prevent="son">百度一下</a>
            </div>
        </div>
        <!-- 4.键修饰符：别名键 -->
        <input type="text" @keyup.Enter="son">
        <!-- 5.键修饰符：ASCLL码 -->
        <input type="text" @keyup.13="son">
        <!-- 6.只触发一次回调 -->
        <div class="son" @click.once="son"></div>




    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                count: 0,
                x: 9
            },
            methods: {
                add() {
                    this.count++;
                    // event:事件对象，里面包含了当前事件的相关信息
                    // console.log(event);
                },
                sub(){
                    this.count--;
                },
                all(){
                    // 点击加号：
                    if(event.target.className==="add"){
                        this.add();
                    }
                    // 点击减号
                    if(event.target.className==="sub"){
                        this.count--;
                    }
                },
                father(){
                    console.log("father");
                },
                son(){
                    console.log("son");
                    console.log(event);
                    // event.stopPropagation();//阻止冒泡
                    // event.preventDefault();//阻止默认行为
                }

            }
        })
    </script>
</body>

</html>